<!--  -->
<template>
  <div class='Carousel_wrapper'>
    <div class="page page_main" >
      <div class="mask"></div>
      <img src="../assets/img/login_bg.jpg" alt="">

      <div class="page1_box">
        <i class="logo"></i>
        <div>
          <div class="slogan"></div>
          <div class="btn_box">
            <a-button type="danger" @click="InstructionalDesign" class="btn_login"> 立即体验 </a-button>
            <!-- <a-button type="danger" @click="toRouter('CourseLearn')" class="btn_login"> 学习课程 </a-button> -->
          </div>
        </div>

        <a href="#" class="concat_us" @click="toRouter('About')">联系我们</a>
      </div>

    </div>

    <div style="width: 100%; height: 100%; position: absolute; top: 0; left: 0;">
      <a-carousel  :autoplay="true" >
        <div class="page page1">
          <div class="mask"></div>
          <img src="../assets/img/login_bg.jpg" alt="">

          <div class="page1_box">
            <i class="logo"></i>
            <div>
              <div class="slogan"></div>
              <div class="btn_box">
                <a-button type="danger" @click="InstructionalDesign" class="btn_login"> 立即体验 </a-button>
                <!-- <a-button type="danger" @click="toRouter('CourseLearn')" class="btn_login"> 学习课程 </a-button> -->
              </div>
            </div>

            <a href="#" class="concat_us">联系我们</a>
          </div>

        </div>
        <div class="page">
          <img src="../assets/img/3.jpg" alt="">
        </div>
        <div class="page">
          <img src="../assets/img/2.jpg" alt="">
        </div>
        <div class="page">
          <img src="../assets/img/1.jpg" alt="">
        </div>



      </a-carousel>
    </div>
  </div>
</template>

<script>

import Login from '@/views/Login.vue';

export default {
  name: '',
  data() {
    return {
      
    }
  },

  components: {
    Login
  },

  created() {
    
  },

  methods: {

    InstructionalDesign() {
      if(!localStorage.getItem('Authorization')) {
        this.$router.push({
          name: 'Login'
        })
      }else {
        this.$router.push({
          name: 'InstructionalDesign'
        })
      }
    },

    toRouter(name) {
      this.$router.push({
        name: name
      })
    },
    onChange(a, b, c) {
      console.log(a, b, c);
    },
  },
}
</script>

<style scoped lang="less">

.Carousel_wrapper {
  width: 100%;
  height: 100%;
  position: relative;
  
  .page_main {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    .page1_box {
      position: absolute;
      left: 0;
      top: 0;
      z-index: 99;
      padding: 60px;
      box-sizing: border-box;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      height: 100%;

      .logo {
        display: inline-block;
        width: 298px;
        height: 61px;
        background: url('../assets/img/logo2.png') 0 0 no-repeat;
        background-size: 100%;
      }

      .slogan {
        display: inline-block;
        width: 422px;
        height: 147px;
        background: url('../assets/img/slogan.png') 0 0 no-repeat;
        background-size: 100%;
      }


      .concat_us{
        color: #fff;
        text-decoration: underline;
      }
    }
  }

  .page {
    position: relative;
    img {
      width: 100%;
      height: 100%;
    }
    .mask {
      position: absolute;
      left: 0;
      top: 0;
      z-index: 9;
      width: 100%;
      height: 100%;
      background: linear-gradient(90deg,rgba(16, 0, 0, 1), rgba(2, 19, 64, 0));
    }
  }

}
.Carousel_wrapper, .ant-carousel {
  width: 100%;
  height: 100%;

  /deep/ .ant-carousel > div{
    overflow: hidden;
    height: 100% !important;
    .slick-list, .slick-track {
      height: 100% !important;
      .slick-slide > div {
        height: 100% !important;
        
      }
    }
  }
}

/deep/ .ant-carousel .slick-dots {
  height: 10px;
  z-index: 999;
  li {
    margin: 0 5px;
    button {
      width: 10px;
      height: 10px;
      border-radius: 50%;
    }
  }
}

/deep/ .slick-dots-bottom {
  bottom: 30px;
}

/deep/ .ant-carousel .slick-dots li.slick-active button {
  background: rgba(154, 0, 0, 1);
}

.btn_box {
  margin-top: 40px;
  display: flex;
  justify-content: space-between;
}
.btn_login {
  width: 200px;
  height: 50px;
  font-size: 18px;
  border: none;
  color: #fff;
  background: linear-gradient(135deg,rgba(198, 23, 23, 1), rgba(255, 119, 119, 1), );
}
</style>